(function(){
    var imgIndex;
    var lis;
    var liWidth;
    var len;
    var md_1;
    var auto_lunbo;

    init();
    function init(){
        imgIndex = 1;
        //将图三复制插入图一之前，原图一复制插入最后，形成循环。
        var img_1 = document.querySelector("#banner li:first-child")
        var copy_1 = img_1.cloneNode(true);
        var img_2 = document.querySelector("#banner li:last-child")
        var copy_2 = img_2.cloneNode(true);

        var ban = document.querySelector("#banner");
        ban.appendChild(copy_1);
        ban.insertBefore(copy_2,img_1);

        len = document.querySelectorAll("#banner li").length;
        console.log(len)
        lis = ban.children;
        liWidth = lis[0].offsetWidth;
        ban.style.width = liWidth * lis.length + 'px';
        ban.style.left = -liWidth + 'px';

        for (var i = 0; i<lis.length; i++){
                document.querySelectorAll("#banner li")[i].style.width = liWidth + 'px';
        }
        // console.log(window.getComputedStyle(lis[0])['height'])
        setTimeout(function(){ban.parentElement.style.height = window.getComputedStyle(lis[0])['height'];},100)
        // ban.parentElement.style.height = window.getComputedStyle(lis[0])['height'];

        document.getElementsByClassName('prev_1')[0].onclick = ()=>{pr()};
        document.getElementsByClassName('next_1')[0].onclick = ()=>{ne()};
        md_1 = document.querySelectorAll('.md li');
        for(var i = 0; i<md_1.length; i++){
            md_1[i].index = i;
            md_1[i].onclick = function(){
                imgIndex = this.index + 1;
                qietu(imgIndex)
            }
        }
        auto();
        document.querySelector(".lunbotu_1").onmouseover = ()=>{pause()};
        document.querySelector(".lunbotu_1").onmouseout = ()=>{auto()};

    }
    function pr(){
        imgIndex--;
        qietu(imgIndex);
    }
    function ne(){
        imgIndex++;
        qietu(imgIndex);
    }
    function qietu(img){
        // md_1[img].className = 'active';
        var list = document.querySelector('#banner');
        if(img === len){
            imgIndex = img = 2;
            list.style.left = -liWidth + 'px';
        }
        if(img === -1){
            imgIndex = img = len - 3;
            list.style.left = -(len - 2) * liWidth + 'px';
        }
        var active;
        if(img === 0){
            active = md_1.length - 1;
        }else if(img === len - 1){
            active = 0;
        }else{
            active = img - 1;
        }
        document.querySelector(".md .active").className = '';
        md_1[active].className = 'active';

        var left = -img * liWidth;
        animation(list, 'left', left);
    }
    function auto(){
        clearInterval(auto_lunbo)
        auto_lunbo = setInterval(ne, 6000);
    }
    function pause(){
        clearInterval(auto_lunbo)
    }
})()

var anjian_1 = document.querySelector(".prev_1");
var anjian_2 = document.querySelector(".next_1");
var ban_1 = document.querySelector("#banner");
anjian_1.style.top = anjian_2.style.top = parseInt(window.getComputedStyle(ban_1).height) / 2 - parseInt(window.getComputedStyle(anjian_1).height) / 2 + 'px';
